<template>
  <section class="relative bg-gradient-to-br from-primary-600 to-primary-800 text-white overflow-hidden">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="absolute top-0 left-0 w-full h-full">
      <div class="absolute top-20 left-10 w-72 h-72 bg-white opacity-5 rounded-full blur-3xl"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-white opacity-5 rounded-full blur-3xl"></div>
    </div>
    
    <div class="relative container-custom section-padding">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <!-- 左侧内容 -->
        <div class="space-y-8">
          <div class="space-y-4">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
              专业的
              <span class="text-yellow-300">数字化</span>
              解决方案
            </h1>
            <p class="text-xl text-gray-200 leading-relaxed">
              为企业提供全方位的技术服务支持，助力企业数字化转型，提升业务效率和竞争力。
            </p>
          </div>
          
          <div class="flex flex-col sm:flex-row gap-4">
            <button class="btn-primary bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 text-lg">
              了解我们的服务
            </button>
            <button class="btn-secondary border-white text-white hover:bg-white hover:text-primary-600 px-8 py-4 text-lg">
              联系我们
            </button>
          </div>
          
          <!-- 统计数据 -->
          <div class="grid grid-cols-3 gap-8 pt-8">
            <div class="text-center">
              <div class="text-3xl font-bold text-yellow-300">500+</div>
              <div class="text-sm text-gray-300">成功项目</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-yellow-300">200+</div>
              <div class="text-sm text-gray-300">合作客户</div>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-yellow-300">5年+</div>
              <div class="text-sm text-gray-300">行业经验</div>
            </div>
          </div>
        </div>
        
        <!-- 右侧图片/视频 -->
        <div class="relative">
          <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden">
            <div class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
              <div class="text-center text-gray-500">
                <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <p class="text-sm">企业展示视频</p>
              </div>
            </div>
          </div>
          
          <!-- 浮动卡片 -->
          <div class="absolute -bottom-6 -left-6 bg-white rounded-xl shadow-lg p-4 max-w-xs">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <div>
                <div class="font-semibold text-gray-900">项目完成</div>
                <div class="text-sm text-gray-600">客户满意度 98%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 可以在这里添加动画逻辑
</script>
